// 佣金设置页面
<template>
  <div>

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>{{this.username}} ->退水</span>
      </ul>

      <ul class="bread-nav-content-right">
        <a class="back" @click="goBack">返回</a>
      </ul>
    </el-row>

    <div class="content" v-if="list">

      <el-row>
        <div>
          <ul>
            <li class="topNavTitle">
              <button class="topNav" @click="goSet">
                基本资料
              </button>
              <button class="topNav topNavSelected">
                退水设定
              </button>
              <button v-if="parseInt(info.level) === 0 || parseInt(info.level) === 1" class="topNav" @click="goOdds">
                赔率差设定
              </button>
            </li>
          </ul>
        </div>
      </el-row>

      <el-row v-if="lotteryType.length > 0" class="content-info-nav">
        <button v-for="(item,index) in lotteryType" :key="index" class="content-info-nav-button" :class="nowSelectedLotteryType === item?'':'lotteryTypeSelected'">
          {{item}}
        </button>
        <ul class="content-info-nav-input">
          <span>赚取退水：</span>
          <input type="text" v-model="setCommission" @keydown="onlyNum(setCommission, $event)">
          <button @click="setCommissionBtn">
            确认
          </button>
        </ul>
      </el-row>

      <table class="myTable" v-if="catalogList">
        <thead>
        <tr>
          <th>
            种类
          </th>
          <th v-for="(item,index) in commType" :key="index">
            {{item.showName}}
          </th>
          <th>
            操作
          </th>
        </tr>
        </thead>
        <tbody>
          <tr class="topTr" v-for="(item,key,index1) in catalogList[nowSelectedLotteryType]" :key="index1">
            <td class="specificTableTd deepColor" :class="'color'+key">{{item.category_name}}</td>
            <td v-if="commType.a_commission !== undefined">
              <input type="text" class="topInput" v-model="item.a_commission" @keydown="onlyNum(item.a_commission, $event)">
            </td>
            <td v-if="commType.b_commission !== undefined">
              <input type="text" class="topInput" v-model="item.b_commission" @keydown="onlyNum(item.b_commission, $event)">
            </td>
            <td v-if="commType.c_commission !== undefined">
              <input type="text" class="topInput" v-model="item.c_commission" @keydown="onlyNum(item.c_commission, $event)">
            </td>
            <td v-if="commType.d_commission !== undefined">
              <input type="text" class="topInput" v-model="item.d_commission" @keydown="onlyNum(item.d_commission, $event)">
            </td>
            <td v-if="commType.order_max_amount !== undefined">
              <input type="text" class="topInput" v-model="item.order_max_amount" @keydown="onlyNum(item.order_max_amount, $event)">
            </td>
            <td v-if="commType.period_max_amount !== undefined">
              <input type="text" class="topInput" v-model="item.period_max_amount" @keydown="onlyNum(item.period_max_amount, $event)">
            </td>
            <td>
              <button @click="changeLimitsList(key)">修改</button>
            </td>
          </tr>
        </tbody>
      </table>

      <div v-for="(infoList,key,index) in list[nowSelectedLotteryType]" :key="index" class="content-info">
        <el-row class="content-info-nav">
          <button class="content-info-nav-button">
            {{key}}
          </button>
        </el-row>
        <table class="upTable">
          <tr>
            <td v-for="(subList,subIndex) in infoList" :key="subIndex" class="upTableTd">
              <table class="myTable">
                <thead>
                <tr>
                  <th>
                    种类
                  </th>
                  <th v-for="(item,index) in commType" :key="index">
                    {{item.showName}}
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,subIndex1) in subList" :key="subIndex1" class="myTableTr">
                  <td class="specificTableTd deepColor" :class="'color'+item.category_code">{{item.comm_name}}</td>
                  <td v-if="commType.a_commission !== undefined">
                    <div>
                      <input type="text" v-model="item.a_commission" @keydown="onlyNum(item.a_commission, $event)" @change="changeText(item.a_commission, item.parent.a_commission, key, subIndex, subIndex1, 1)" :class="{'change':item.init.a_commission != item.a_commission}"/>
                    </div>
                    <div>(
                        <span>
                          {{item.parent.a_commission}}
                        </span>)
                    </div>
                  </td>
                  <td v-if="commType.b_commission !== undefined">
                    <div>
                        <input type="text" v-model="item.b_commission" @keydown="onlyNum(item.b_commission, $event)" @change="changeText(item.b_commission, item.parent.b_commission, key, subIndex, subIndex1, 2)" :class="{'change':item.init.b_commission != item.b_commission}"/>
                    </div>
                    <div>(
                        <span>
                          {{item.parent.b_commission}}
                        </span>)
                    </div>
                  </td>
                  <td v-if="commType.c_commission !== undefined">
                    <div>
                        <input type="text" v-model="item.c_commission" @keydown="onlyNum(item.c_commission, $event)" @change="changeText(item.c_commission, item.parent.c_commission, key, subIndex, subIndex1, 3)" :class="{'change':item.init.c_commission != item.c_commission}"/>
                    </div>
                      <div>(
                        <span>
                          {{item.parent.c_commission}}
                        </span>)
                      </div>
                  </td>
                  <td v-if="commType.d_commission !== undefined"><ul>
                    <div>
                      <input type="text" v-model="item.d_commission" @keydown="onlyNum(item.d_commission, $event)" @change="changeText(item.d_commission, item.parent.d_commission, key, subIndex, subIndex1, 4)" :class="{'change':item.init.d_commission != item.d_commission}"/>
                    </div>
                    <div>(
                        <span>
                          {{item.parent.d_commission}}
                        </span>)
                    </div>
                  </ul></td>
                  <td v-if="commType.order_max_amount !== undefined"><ul>
                    <div>
                      <input type="text" v-model="item.order_max_amount" @keydown="onlyNum(item.order_max_amount, $event)" @change="changeText(item.order_max_amount, item.parent.order_max_amount, key, subIndex, subIndex1, 5)" :class="{'change':item.init.order_max_amount != item.order_max_amount}"/>
                    </div>
                    <div>(
                        <span>
                          {{item.parent.order_max_amount}}
                        </span>)
                    </div>
                  </ul></td>
                  <td v-if="commType.period_max_amount !== undefined"><ul>
                    <div>
                      <input type="text" v-model="item.period_max_amount" @keydown="onlyNum(item.period_max_amount, $event)" @change="changeText(item.period_max_amount, item.parent.period_max_amount, key, subIndex, subIndex1, 6)" :class="{'change':item.init.period_max_amount != item.period_max_amount}"/>
                    </div>
                    <div>(
                        <span>
                          {{item.parent.period_max_amount}}
                        </span>)
                    </div>
                  </ul></td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </table>

      </div>

      <el-row class="bottom">
        <ul>
          保存时下线是否等量增加：
          <label>
            <input type="radio" :value="1" v-model="downline">
            不增加
          </label>
          <label>
            <input type="radio" :value="2" v-model="downline">
            只代理
          </label>
          <label>
            <input type="radio" :value="3" v-model="downline">
            代理和会员
          </label>
        </ul>
        <button @click="submit">保存</button>
        <button @click="reset">取消</button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatFloat } from '@/utils/index'
import { user as userMap } from '@/utils/map' // 参数映射

export default {
  name: 'profileCredit', // 用户信息页
  data() {
    return {
      setCommission: null, // 赚取退水设置
      setParams: '', // 跳转到基本信息需要的参数
      downline: 1,
      params: {}, // 要提交保存的表单
      username: null, // 用户名称
      // games: null, //游戏列表
      loading: false,
      list: null, // 详细表格数据源  array
      handicaps: null, // 提成盘口
      game_code: null, // 以game_code作为tab的key
      userMap: userMap, // 用户字段映射
      lotteryType: '',
      nowSelectedLotteryType: '',
      commType: {
        'a_commission': {
          field: 'a_commission',
          showName: 'A盘(%)',
          step: 0.0001,
          min: 0,
          max: 100,
        },
        'b_commission': {
          field: 'b_commission',
          showName: 'B盘(%)',
          step: 0.0001,
          min: 0,
          max: 100,
        },
        'c_commission': {
          field: 'c_commission',
          showName: 'C盘(%)',
          step: 0.0001,
          min: 0,
          max: 100,
        },
        'd_commission': {
          field: 'd_commission',
          showName: 'D盘(%)',
          step: 0.0001,
          min: 0,
          max: 100,
        },
        'order_max_amount': {
          field: 'order_max_amount',
          showName: '注单限额',
          step: 1,
          min: 0,
          max: 1000000,
        },
        // '11': { field: 'order_min_amount', showName: '注单最小额', step: 1, min: 0, max: 1000000 },
        'period_max_amount': {
          field: 'period_max_amount',
          showName: '单期限额',
          step: 1,
          min: 0,
          max: 1000000,
        },
      },
      catalogList: { // 提成分类列表数据源  array
        快开彩: {
          11: {
            a_commission: 0.6,
            b_commission: 1,
            c_commission: 2,
            d_commission: 3,
            category_code: '11',
            category_name: '号码类(球号、车号、正号等)',
            order_max_amount: 10000,
            period_max_amount: 60000,
          },
          12: {
            a_commission: 0.6,
            b_commission: 1,
            c_commission: 2,
            d_commission: 3,
            category_code: '12',
            category_name: '两面类(大小、单双、龙虎、三军等)',
            order_max_amount: 50000,
            period_max_amount: 100000,
          },
          13: {
            a_commission: 0.6,
            b_commission: 1,
            c_commission: 2,
            d_commission: 3,
            category_code: '13',
            category_name: '多项类(方位、中发白、共和过关等)',
            order_max_amount: 30000,
            period_max_amount: 60000,
          },
          14: {
            a_commission: 0.6,
            b_commission: 1,
            c_commission: 2,
            d_commission: 3,
            category_code: '14',
            category_name: '连码类(任选二、任选三、前二组选等)',
            order_max_amount: 5000,
            period_max_amount: 10000,
          },
          15: {
            a_commission: 0.6,
            b_commission: 1,
            c_commission: 2,
            d_commission: 3,
            category_code: '15',
            category_name: '其它(冠亚和、前中后三等)',
            order_max_amount: 2000,
            period_max_amount: 10000,
          },
        },
        香港彩: {
          21: {
            a_commission: 0.6,
            b_commission: 1,
            c_commission: 2,
            d_commission: 3,
            category_code: '21',
            category_name: '号码类',
            order_max_amount: 10000,
            period_max_amount: 60000,
          },
          22: {
            a_commission: 0.6,
            b_commission: 1,
            c_commission: 2,
            d_commission: 3,
            category_code: '22',
            category_name: '两面类',
            order_max_amount: 50000,
            period_max_amount: 100000,
          },
          23: {
            a_commission: 0.6,
            b_commission: 1,
            c_commission: 2,
            d_commission: 3,
            category_code: '23',
            category_name: '多项类',
            order_max_amount: 30000,
            period_max_amount: 60000,
          },
          24: {
            a_commission: 0.6,
            b_commission: 1,
            c_commission: 2,
            d_commission: 3,
            category_code: '24',
            category_name: '连码类',
            order_max_amount: 5000,
            period_max_amount: 10000,
          },
          25: {
            a_commission: 0.6,
            b_commission: 1,
            c_commission: 2,
            d_commission: 3,
            category_code: '25',
            category_name: '其它',
            order_max_amount: 2000,
            period_max_amount: 10000,
          },
        },
      },

      quickSetup: {
        '11': [], // 游戏大类分类/号码类
        '12': [], // 游戏大类分类/两面类
        '13': [], // 游戏大类分类/多项类
        '14': [], // 游戏大类分类/连码类
        '15': [], // 游戏大类分类/其它
      },
      isGoBack: false, // 是否返回到用户列表
    }
  },
  filters: {
    formatFloat: formatFloat, // 格式化保留两位小数,
  },
  created() {
    this.$store.dispatch('GameOptionss')
      .then(() => {
        this.game_code = this.gameOptions[0].game_code
      })
    if (this.$route.params.username) {
      this.username = this.$route.params.username
    } else {
      // 报错
      this.$message({
        message: '获取用户参数错误!',
        type: 'warning',
      })
      return
    }
    if (this.$route.params.isGoBack) {
      this.isGoBack = this.$route.params.isGoBack
    }
    this.setParams = this.$route.params

    this.getSetting()
  },
  computed: { ...mapGetters(['info', 'gameOptions']) },
  methods: {
    onlyNum(value, e) {
      let isOK = false
      const key = window.event ? e.keyCode : e.which
      if ((key > 95 && key < 106) || // 小键盘上的0到9
        (key > 47 && key < 60) || // 大键盘上的0到9
        (key === 110 && value.indexOf('.') < 0) || // 小键盘上的.而且以前没有输入.
        (key === 190 && value.indexOf('.') < 0) || // 大键盘上的.而且以前没有输入.
        key === 8 || key === 9 || key === 46 || key === 37 || key === 39 // 不影响正常编辑键的使用(8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
      ) {
        isOK = true
      } else {
        if (window.event) { // IE
          e.returnValue = false // event.returnValue=false 效果相同.
        } else { // Firefox
          e.preventDefault()
        }
      }
      e.returnValue = isOK
    },
    setCommissionBtn() {
      for (const index in this.list[this.nowSelectedLotteryType]) {
        for (const subIndex in this.list[this.nowSelectedLotteryType][index]) {
          for (const key in this.list[this.nowSelectedLotteryType][index][subIndex]) {
            const temp = this.list[this.nowSelectedLotteryType][index][subIndex][key]
            if (temp.a_commission !== undefined) {
              let num = parseFloat(temp.init.a_commission) - parseFloat(this.setCommission)
              num = Math.round(num * 100000) / 100000
              temp.a_commission = parseFloat(num) > 0 ? num : 0
            }
            if (temp.b_commission !== undefined) {
              let num = parseFloat(temp.init.b_commission) - parseFloat(this.setCommission)
              num = Math.round(num * 100000) / 100000
              temp.b_commission = parseFloat(num) > 0 ? num : 0
            }
            if (temp.c_commission !== undefined) {
              let num = parseFloat(temp.init.c_commission) - parseFloat(this.setCommission)
              num = Math.round(num * 100000) / 100000
              temp.c_commission = parseFloat(num) > 0 ? num : 0
            }
            if (temp.d_commission !== undefined) {
              let num = parseFloat(temp.init.d_commission) - parseFloat(this.setCommission)
              num = Math.round(num * 100000) / 100000
              temp.d_commission = parseFloat(num) > 0 ? num : 0
            }
          }
        }
      }
    },
    goSet() {
      this.$router.push({
        name: 'user_update',
        params: this.setParams,
      })
    },
    goOdds() {
      this.$router.push({
        name: 'user_odds',
        params: this.setParams,
      })
    },
    changeText(value, parentValue, index, subIndex, subIndex1, type) {
      let infoType = ''
      if (type === 1) {
        infoType = 'a_commission'
      }
      if (type === 2) {
        infoType = 'b_commission'
      }
      if (type === 3) {
        infoType = 'c_commission'
      }
      if (type === 4) {
        infoType = 'd_commission'
      }
      if (type === 5) {
        infoType = 'order_max_amount'
      }
      if (type === 6) {
        infoType = 'period_max_amount'
      }

      if (parseFloat(value) > parseFloat(parentValue)) {
        alert('种类 最大值:' + parentValue)
        this.list[this.nowSelectedLotteryType][index][subIndex][subIndex1][infoType] = parseFloat(parentValue)
      }
    },
    reset() {
      for (const key in this.list) {
        for (const index in this.list[key]) {
          for (const subIndex in this.list[key][index]) {
            for (const subItemIndex in this.list[key][index][subIndex]) {
              const tempInit = this.list[key][index][subIndex][subItemIndex]
              for (const infoIndex in this.list[key][index][subIndex][subItemIndex]) {
                if (!(infoIndex === 'init' || infoIndex === 'parent')) {
                  this.list[key][index][subIndex][subItemIndex][infoIndex] = JSON.parse(JSON.stringify(tempInit.init[infoIndex]))
                }
              }
            }
          }
        }
      }
      this.$forceUpdate()
    },
    submit() {
      const tempSubParams = []
      for (const key in this.list) {
        for (const index in this.list[key]) {
          for (const subIndex in this.list[key][index]) {
            for (const subItemIndex in this.list[key][index][subIndex]) {
              const tempInit = this.list[key][index][subIndex][subItemIndex]
              let tempSubParamsList = {}
              for (const infoIndex in this.list[key][index][subIndex][subItemIndex]) {
                const tempInfo = this.list[key][index][subIndex][subItemIndex][infoIndex]
                if (infoIndex === 'a_commission' && tempInit.init[infoIndex] !== tempInfo) {
                  tempSubParamsList = {
                    k: tempInit.game + '_' + tempInit.item_id + '_' + 'a',
                    v: tempInfo,
                  }
                  tempSubParams.push(tempSubParamsList)
                }
                if (infoIndex === 'b_commission' && tempInit.init[infoIndex] !== tempInfo) {
                  tempSubParamsList = {
                    k: tempInit.game + '_' + tempInit.item_id + '_' + 'b',
                    v: tempInfo,
                  }
                  tempSubParams.push(tempSubParamsList)
                }
                if (infoIndex === 'c_commission' && tempInit.init[infoIndex] !== tempInfo) {
                  tempSubParamsList = {
                    k: tempInit.game + '_' + tempInit.item_id + '_' + 'c',
                    v: tempInfo,
                  }
                  tempSubParams.push(tempSubParamsList)
                }
                if (infoIndex === 'd_commission' && tempInit.init[infoIndex] !== tempInfo) {
                  tempSubParamsList = {
                    k: tempInit.game + '_' + tempInit.item_id + '_' + 'd',
                    v: tempInfo,
                  }
                  tempSubParams.push(tempSubParamsList)
                }
                if (infoIndex === 'order_max_amount' && tempInit.init[infoIndex] !== tempInfo) {
                  tempSubParamsList = {
                    k: tempInit.game + '_' + tempInit.item_id + '_' + 'maxAmount',
                    v: tempInfo,
                  }
                  tempSubParams.push(tempSubParamsList)
                }
                if (infoIndex === 'period_max_amount' && tempInit.init[infoIndex] !== tempInfo) {
                  tempSubParamsList = {
                    k: tempInit.game + '_' + tempInit.item_id + '_' + 'maxPeriod',
                    v: tempInfo,
                  }
                  tempSubParams.push(tempSubParamsList)
                }
              }
            }
          }
        }
      }
      const params = {
        username: this.username,
        downline: this.downline,
        params: tempSubParams,
      }
      if (params.params.length > 0) {
        if (window.confirm('你确定要提交修改吗？')) {
          this.$store.dispatch('SetCommissions', params)
            .then(response => {
              if (response.status) {
                this.getSetting()
                if (this.isGoBack) {
                  this.$router.push('/user')
                }
              }
              alert(response.message)
            })
          return true
        } else {
          return false
        }
      } else {
        alert('请先修改数据')
      }
    },
    // 上方修改按钮事件
    changeLimitsList(lotteryType) {
      for (const index in this.list[this.nowSelectedLotteryType]) {
        for (const subIndex in this.list[this.nowSelectedLotteryType][index]) {
          for (const key in this.list[this.nowSelectedLotteryType][index][subIndex]) {
            const temp = this.list[this.nowSelectedLotteryType][index][subIndex][key]
            if (temp.category_code === lotteryType) {
              if (temp.a_commission !== undefined) {
                temp.a_commission = this.catalogList[this.nowSelectedLotteryType][lotteryType].a_commission
              }
              if (temp.b_commission !== undefined) {
                temp.b_commission = this.catalogList[this.nowSelectedLotteryType][lotteryType].b_commission
              }
              if (temp.c_commission !== undefined) {
                temp.c_commission = this.catalogList[this.nowSelectedLotteryType][lotteryType].c_commission
              }
              if (temp.d_commission !== undefined) {
                temp.d_commission = this.catalogList[this.nowSelectedLotteryType][lotteryType].d_commission
              }
              if (temp.order_max_amount !== undefined) {
                temp.order_max_amount = this.catalogList[this.nowSelectedLotteryType][lotteryType].order_max_amount
              }
              if (temp.period_max_amount !== undefined) {
                temp.period_max_amount = this.catalogList[this.nowSelectedLotteryType][lotteryType].period_max_amount
              }
            }
          }
        }
      }
    },

    goBack() {
      this.$router.go(-1)
    },
    // 根据用户盘口,删除不存在的盘口
    formatCommissionType() {
      for (const key in this.commType) {
        if (this.commType.hasOwnProperty(key)) {
          const element = this.commType[key]
          if (key > 0 && key < 10 && this.handicaps.indexOf(key) < 0) {
            delete this.commType[key] // 删除不存在的盘口
          }
        }
      }
    },
    // 获取父级commission设置
    getSetting() {
      this.loading = true
      this.$store
        .dispatch('GetDatasCommissions', { child: this.username })
        .then(response => {
          this.loading = false
          console.log('获取父级commission设置', response)
          if (
            // 庄家没有commission返回
            response &&
            response.parent_commission &&
            response.child_commission
          ) {
            this.handicaps = response.handicaps
            // 根据user的handicaps,更新userMap.commissionType 删除不存在的盘口
            // this.formatCommissionType()
            // 格式化目录数据列表 甲方说数据写死，这里就暂时不用，先注释了，以后怕又要用
            // *******************************
            // this.formatCatalogCommission(response.category_commission)
            // *******************************
            // 格式化表格数据列表
            this.formatCommissionList(
              response.child_commission,
              response.parent_commission
            )
            this.params = {}
          }
        })
    },

    // 格式化 catalogCommission
    formatCatalogCommission(category_min) {
      const res = []
      for (const key in category_min) {
        res[key] = {}
        for (const category_code in category_min[key]) {
          res[key][category_code] = []
          if (category_min[key].hasOwnProperty(category_code)) {
            const item = category_min[key][category_code]
            item['category_code'] = category_code
            item['category_name'] = this.userMap.gameCatalogCode[key][category_code].name
            item['init'] = JSON.parse(JSON.stringify(item)) // 保存自身初始值 ,用于金额判断
            // for (const key in this.commType[key]) {
            //   if (this.commType[key].hasOwnProperty(key)) {
            //     const element = this.commType[key]
            //     item[`${element.field}_highlight_class`] = '' // 根据k添加对应高亮样式
            //   }
            // }
            res[key][category_code] = JSON.parse(JSON.stringify(item))
          }
        }
      }
      console.log('111111111111', res)
      this.catalogList = res
    },

    // 格式化列表
    formatCommissionList(...args) {
      const [self, parent] = args
      const res = {}
      this.lotteryType = []
      let i = 0
      for (const lottery_code in self) {
        res[lottery_code] = {}
        this.lotteryType.push(lottery_code)
        if (self.hasOwnProperty(lottery_code)) {
          const lottery = self[lottery_code]
          for (const game_code in lottery) {
            res[lottery_code][game_code] = {}
            const game = lottery[game_code]
            let listI = 0
            const listHalfLength = parseInt(Object.keys(game).length / 2) + 1
            res[lottery_code][game_code][0] = []
            res[lottery_code][game_code][1] = []
            for (const item_code in game) {
              if (game.hasOwnProperty(item_code)) {
                const item = game[item_code]
                item['init'] = JSON.parse(JSON.stringify(item)) // 保存自身初始值 ,用于金额判断
                item['parent'] = parent[lottery_code][game_code][item_code] // 保存父级item信息,用于金额判断

                // for (const key in this.commType) {
                //   if (this.commType.hasOwnProperty(key)) {
                //     const element = this.commType[key]
                //     item[`${element.field}_highlight_class`] = '' // 根据k添加对应高亮样式
                //   }
                // }
                const tempItem = JSON.parse(JSON.stringify(item))
                if (listI < listHalfLength) {
                  res[lottery_code][game_code][0].push(tempItem)
                } else {
                  res[lottery_code][game_code][1].push(tempItem)
                }
                listI++

                i++

                if (i === 1) {
                  for (const subItem in game[item_code]) {
                    this.tempCommType += subItem + ','
                  }
                }
              }
            }
          }
        }
      }
      for (const key in this.commType) {
        if (this.commType.hasOwnProperty(key)) {
          if (this.tempCommType.indexOf(key) < 0) {
            delete this.commType[key] // 删除不存在的盘口
          }
        }
      }

      this.nowSelectedLotteryType = this.lotteryType[0]

      for (const key in this.quickSetup) {
        for (const index in this.commType) {
          this.quickSetup[key][index] = this.commType[index].max
        }
      }
      console.log('-----------', res)
      this.list = res
    },

    // 目录input变化 导致同catalogcode的input一起变化
    catalogInputChange(...args) {
      this.$nextTick(_ => {
        // 获取回调后的值才是最新的值
        const [key_name, rowIndex, row] = args
        const valueInit = row.init[key_name] // 初始值,
        const valueInput = row[key_name] // 输入值
        // 添加cattaloginput高亮样式
        if (valueInit !== valueInput) {
          this.catalogList[rowIndex][`${key_name}_highlight_class`] =
            'hightlight'
        } else {
          this.catalogList[rowIndex][`${key_name}_highlight_class`] = ''
        }

        // console.log(valueInput, valueMax, this.catalogList);
        for (const game_code in this.list) {
          if (this.list.hasOwnProperty(game_code)) {
            // 这里为什么要用hasOwnProperty进行过滤呢？
            // 因为for...in 循环会把对象原型链上的所有可枚举属性都循环出来
            const game = this.list[game_code]
            for (const i in game) {
              if (game.hasOwnProperty(i)) {
                const item = game[i]

                if (item.category_code === row.category_code) {
                  item[key_name] = valueInput // 根据目录输入,批量修改对应的表格值
                  // 添加高亮样式  与自身初始值不一致 ##最佳实现,与自身初始值对比
                  if (item.init[key_name] !== valueInput) {
                    item[`${key_name}_highlight_class`] = 'hightlight'
                    this.params[`${item.item_code}-${key_name}`] = item // 保存修改的item
                  } else {
                    // 删除样式
                    item[`${key_name}_highlight_class`] = ''
                    delete this.params[`${item.item_code}-${key_name}`] // 删除未修改行
                  }
                }
              }
            }
          }
        }
        // console.log(this.params, Object.keys(this.params).length);
      })
    },

    // 表格input的变化
    cellChange(...args) {
      this.$nextTick(_ => {
        // 获取回调后的值才是最新的值
        const [key_name, rowIndex, row] = args
        const valueMax = row.parent[key_name] // 最大值,
        const valueInit = row.init[key_name] // 初始值,
        const valueInput = row[key_name] // 输入值
        if (parseFloat(valueInput) !== parseFloat(valueInit)) {
          // highlight
          row[`${key_name}_highlight_class`] = 'hightlight'
          // 保存修改的item
          this.params[`${row.item_code}-${key_name}`] = row
        } else {
          row[`${key_name}_highlight_class`] = ''
          delete this.params[`${row.item_code}-${key_name}`] // 删除未修改行
        }

        console.log(valueInit, valueInput)
        console.log(Object.keys(this.params).length)

        // console.log(valueMax, valueInit, valueInput, key_name);
      })
    },
    onSubmit() {
      // console.log(this.params);
      const ob = {}
      for (const k in this.params) {
        if (this.params.hasOwnProperty(k)) {
          const row = this.params[k]
          const [item_code, key_name] = k.split('-')
          if (typeof ob[item_code] === 'undefined') {
            ob[item_code] = {}
          }
          ob[item_code]['game_code'] = row.game_code
          ob[item_code]['item_code'] = row.item_code
          ob[item_code][key_name] = row[key_name]
        }
      }
      // console.log(ob, Object.values(ob).length);
      const params = Object.values(ob)
      if (params.length <= 0) {
        // 没有修改
        this.$message({
          message: '没有金额变化的条目!',
          type: 'warning',
        })
      } else {
        this.loading = true
        this.$store
          .dispatch('SetCommissions', {
            username: this.username,
            params: params,
          })
          .then(response => {
            this.loading = false
            if (response === true) {
              this.$alert('修改成功', '提示', {
                confirmButtonText: '确定',
                center: true,
                callback: this.getSetting,
              })
            } else {
              this.$message({
                message: '修改失败',
                type: 'warning',
              })
            }
          })
          .catch(error => {
            this.loading = false
            console.log(error)
            // this.$message({
            //   message: error.message,
            //   type: "warning"
            // });
          })
      }
    },
    // 表格样式
    CatalogCellClass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return this.userMap.gameCatalogCode[row.category_code].className
      }
      // console.log(row, column, rowIndex, columnIndex);
    },
  },
  watch: {},
}
</script>

<style scoped>
  .topNavTitle{
    height: 29px;
    line-height: 29px;
    background: url(/static/agent/img/tab_bg02.gif) repeat-x left -93px;
  }
  .topNav{
    display: block;
    width: 98px;
    height: 29px;
    font-size: 13px;
    color: #7d7d7d;
    background: url(/static/agent/img/tab_bg02.gif) no-repeat left -29px;
    text-shadow: 1px 1px 0 white;
    margin: 0 5px 0 0;
    text-align: center;
    float: left;
    text-decoration: none;
    border:none;
  }
  .topNavSelected{
    color: #274D98;
    /* font-weight: bold; */
    background: url(/static/agent/img/tab_bg02.gif) no-repeat left top;
  }
  .topNav:hover{
    color: #274D98;
    /* font-weight: bold; */
    background: url(/static/agent/img/tab_bg02.gif) no-repeat left top;
  }

  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-content-right{
    float: right;
  }
  .bread-nav-content-right .back{
    border:0;
    background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
    color:#386399;
    display: block;
    font-weight: bold;
    margin-right: 10px;
    padding: 0 0 0 20px;
  }
  .bread-nav-content-right .back:hover{
    text-decoration: underline;
  }

  .content{
    padding:10px;
  }

  .content-info{
    width: 100%;
    padding-top: 5px;

  }
  .content-info-nav{
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
  }
  .content-info-nav-button{
    color:#ffffff;
    border:0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #386bad;
    height:30px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: bold;
  }
  .content-info-nav-button:hover{
    text-decoration: underline;
  }
  .lotteryTypeSelected{
    background-color: #dcdcdc;
    color:#535353;
  }
  .content-info-nav-input{
    line-height: 30px;
    padding-left: 20px;
    font-size: 13px;
  }
  .content-info-nav-input button{
    padding: 0;
  }

  .topTr{

  }
  .topTr td > .topInput{
    width:100px !important;
    max-width: 120px !important;
  }

  .upTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .upTableTd{
    vertical-align: top;
    width:50%;
  }

  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .myTable th{
    background: url(/static/agent/img/table_head.gif) repeat-x;
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 18px;
    font-size:13px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    text-align: center;
    color: #131950;
    line-height: 18px;
    font-size:13px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }
  .myTable td div{
    max-height: 22px;
  }
  .myTable td input[type='text']{
    text-align: center;
    width:60px;
    max-width:100px;
    border: #abb2c5 1px solid;
  }
  .myTableTr:hover{
    background-color: #deedfe;
  }
  .deepColor{
    background-color: #F2F2F2;
    width: 240px;
    font-weight: bold;
    background-image: url(/static/agent/img/td_ts.gif);
    background-repeat: no-repeat;
  }

  .bottom{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    line-height: 30px;
    font-size:13px;
  }
  .bottom button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    border: 0px;
    background-color: #487BD1;
    border-radius: 5px;
    margin-left: 10px;
  }
  .bottom button:hover{
    background-color: #7bb1d0;
    color:#fff100;
  }

  .color11{
    background-position: right top;
  }
  .color12{
    background-position: right -150px;
  }
  .color13{
    background-position: right -200px;
  }
  .color14{
    background-position: right -100px;
  }
  .color15{
    background-position: right -50px;
  }

  .change{
    background-color: aqua;
  }
</style>
